<template>
	<div class="box">
		<div class="titbg"></div>
		<div class="head">
			<div class="lef">
				<div class="portrait">
					<img src="../../assets/img/Evil_wind.png"/>
				</div>
				<div class="myId">{{$store.state.myName}}</div>
				<div class="function">
					<div class="function_musicimg">					
						<img src="../../assets/img/music.png"/>
					</div>
					<span>音乐包</span>
				</div>
			</div>
			<div class="rig">
				<div>开通会员</div>
			</div>
		</div>
	</div>
</template>

<script>
</script>

<style scoped lang="scss">
	.box{
		display: flex;
		position: relative;
		margin-bottom: 50px;
		.titbg{
			width: 100%;
			height: 30px;
			background-color: #313638;
		}
		.head{
			width: 95%;
			height: 60px;
			padding: 0 5px;
			background-color: white;
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			border-radius: 5px;
			box-shadow:0 5px 15px #999;
			align-items: center;
			justify-content: space-between;
			background-color: #f6f7f8;
			display: flex;
			div{
				margin: 0 5px;
			}
			.lef{
				display: flex;
				.portrait{
					width: 40px;
					height: 40px;
					overflow: hidden;
					border-radius: 50%;
					img{
						width: 100%;
					}
				}
				.myId{
					align-self: center;
					font-weight: 700;
					font-size: 14px;
					color: black;
				}
				.function{
					padding: 2px;
					display: flex;
					align-self: center;
					background-color: #cccccc;
					color: white;
					border-radius: 5px;
					.function_musicimg{
						display: flex;
						width: 12px;
						img{
							width: 120%;
							align-self: center;
						}
					}
					span{
						font-size: 12px;
						justify-content: center;
					}
				}
			}
			.rig{
				border-radius: 15px;
				width: 70px;
				display: flex;
				height: 20px;
				position: relative;
				border: 1px solid black;
				div{
					width: 48px;
					position: absolute;
					margin-left: 50%;
					transform: translateX(-50%);
					font-size: 10px;
					align-self: center;
				}
			}
		}
	}
</style>